<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 100%;
      height: 100vh;
      background-color: #fff6fc;
      text-align: center;
    }

    #wrapper {
      margin-top: 20px;
      display: inline-block;
      width: 400px;
      height: 100px;
      background-color: black;
      color: #fff;
      line-height: 100px;
      font-size: 40px;
      border-radius: 8px;
    }

    #btn {
      width: 200px;
      height: 30px;
      margin-top: 200px;
    }
  </style>
</head>
<body>
<div id="box">
  <button id="btn">开始点名</button>
  <br>
  <div id="wrapper">

  </div>
</div>

<script>
//'李杰', 
  var usernames = [
'张艺鹏',
'高钰松',
'李想',
'陈立行',
'杨瑶',
'刘玉超',
'胡兵杰',
'李校刚',
'韩彤辉',
'刘天一',
'张钊',
'康志龙',
'田茂盛',
'黄俊程',
'杨肖雄',
'傅晓萱',
  ];
  var flag = true;
  var timer = null;
  wrapper.innerHTML = '张艺鹏';
  btn.onclick = function () {
    if (flag) {
      timer = setInterval(() => {
        wrapper.innerHTML = usernames[parseInt((Math.random() * (usernames.length)))]
      }, 100);
      btn.innerHTML = '停止点名';
    } else {
      btn.innerHTML = '开始点名';
      clearInterval(timer);
    }
    flag = !flag;
  }

</script>
</body>
</html>
